import styled from "styled-components";
import{useState} from 'react'


const Wrapper = styled.div`
    margin-top:5px;
    padding:10px 0px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
    >input{
        padding:10px;
        border-radius:5px;
        border:1px solid #a1a0a0;
    }
    >.title{
        margin-top:10px;
        width:100%;
        display:flex;
        justify-content: flex-end;
        >button{
            
            background: rgb(59, 85, 71);
            color:rgb(221, 216, 216);
            padding:5px 15px;
            border-radius:5px;
            border:1px solid #a1a0a0;
            box-shadow: 1px 1px 2px 2px rgb(223, 220, 220);
        }
        >.close{
            margin:0px 20px;
            background: rgb(132, 134, 133);
        }
    }
    
`
type TProp={
    onChange:(note?:string)=>void
    
}
const NewTodoList =(Props:TProp)=>{
    let [note,setNote]=useState('')
    return (
        <Wrapper>
            <input type="text" placeholder="请输入待办事项" onChange={(e)=>{setNote(e.target.value)}} />
            <div className="title">
                <button  onClick={()=>{Props.onChange(note)}}>确定</button>
                <button className="close" onClick={()=>{Props.onChange()}}>取消</button>
            </div>
           
        </Wrapper>
    )
}

export default NewTodoList;